<template>
  <div class="interview-room-fullscreen">
    <!-- 头部 -->
    <div class="room-header">
      <div class="company-info">
        <h2>{{ interviewInfo.company }}</h2>
        <div class="position">{{ interviewInfo.position }}</div>
      </div>
      <div class="interview-timer">
        <div class="timer">{{ formatTime(interviewTime) }}</div>
        <el-tag v-if="isAnswering" type="success">正在回答</el-tag>
        <el-tag v-else type="warning">等待回答</el-tag>
      </div>
      <div class="controls">
        <el-button type="danger" @click="exitInterview">结束面试</el-button>
      </div>
    </div>
    
    <!-- 主体内容：左右分屏 -->
    <div class="room-content">
      <!-- 左侧：面试官视频 -->
      <div class="video-section interviewer-section">
        <div class="video-container" :style="{backgroundColor: '#fff'}">
          <!-- <div class="video-placeholder">
            <el-avatar :size="120" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            <div class="name">面试官</div>
          </div> -->
          <div className="video-placeholder wrapper1" >
            <div id="avatar"  className="wrapper1"  :style="{width:'100%',height: '970px',marginTop: '-250px'}"></div>
          </div>
        </div>
      </div>
      
      <!-- 右侧：面试者视频 -->
      <div class="video-section interviewee-section">
        <div class="video-container">
          <div class="video-placeholder">
            <video ref="video" autoplay muted class="video-element"></video>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部控制栏 -->
    <div class="room-footer">
      <div class="control-buttons">
        <el-button 
          type="primary" 
          size="large" 
          :disabled="isAnswering" 
          @click="startAnswer"
        >
          <el-icon class="icon"><VideoPlay /></el-icon>
          开始回答
        </el-button>
        <el-button 
          type="danger" 
          size="large" 
          :disabled="!isAnswering" 
          @click="endAnswer"
        >
          <el-icon class="icon"><VideoPause /></el-icon>
          结束回答
        </el-button>
      </div>
    </div>
    
    <!-- 退出面试确认对话框 -->
    <el-dialog
      v-model="exitDialogVisible"
      title="确认结束面试"
      width="30%"
    >
      <span>确定要结束当前面试吗？录制的视频将会被保存到D:/ftp目录。</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exitDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmExit">确认</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 开始面试确认对话框 -->
    <el-dialog
      v-model="startDialogVisible"
      title="准备开始面试"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="start-dialog-content">
        <p>您即将开始与<strong>{{ interviewInfo.company }}</strong>的面试</p>
        <p>面试职位：<strong>{{ interviewInfo.position }}</strong></p>
        <p>面试时间：{{ interviewInfo.date }} {{ interviewInfo.time }}</p>
        <p class="tips">请确保您的摄像头和麦克风已准备就绪，并且处于安静的环境中。</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelInterview">取消面试</el-button>
          <el-button type="primary" @click="confirmStartInterview">开始面试</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount,reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
import '../sdk/crypot/crypto-js.js'
import AvatarPlatform, {PlayerEvents,SDKEvents,} from '../sdk/avatar/index.js';
import '../dist/index.umd.js'
import {saveInterviewInfo} from '@/api/interView'
import type { Interview } from '@/api/interView';

// Type declaration for RecorderManager from the external library
declare const RecorderManager: any;
// Type declarations for CryptoJS if needed
declare const CryptoJS: any;
// Type declaration for MozWebSocket for older browsers
declare const MozWebSocket: typeof WebSocket;

const recorder = new RecorderManager("/src/dist");

// 视频录制相关变量
const mediaRecorder = ref<MediaRecorder | null>(null);
const recordedChunks = ref<Blob[]>([]);
const isRecording = ref(false);
const videoFileName = ref('');

// WebSocket for speech recognition
let iatWS: WebSocket;
recorder.onFrameRecorded = ({ isLastFrame, frameBuffer }) => {
    if (iatWS.readyState === iatWS.OPEN) {
      iatWS.send(
        JSON.stringify({
          data: {
            status: isLastFrame ? 2 : 1,
            format: "audio/L16;rate=16000",
            encoding: "raw",
            audio: toBase64(frameBuffer),
          },
        })
      );
      if (isLastFrame) {
        
      }
    }
  };
function getCurrentFormattedTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-based
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    return `${year}${month}${day}${hours}${minutes}${seconds}`;
}

var APPID = "8a808a53";
var API_SECRET = "YTZlNDRmNzQ5MjA0NmVjYjI2Y2E4ZGJl";
var API_KEY = "6aef1b8a6eeebb8260789e91a59d961c";
  /**
   * 获取websocket url
   * 该接口需要后端提供，这里为了方便前端处理
   */
function getWebSocketUrl() { 
    // 请求地址根据语种不同变化
    var url = "wss://iat-api.xfyun.cn/v2/iat";
    var host = "iat-api.xfyun.cn";
    var apiKey = API_KEY;
    var apiSecret = API_SECRET;
    var date = new Date().toGMTString();
    var algorithm = "hmac-sha256";
    var headers = "host date request-line";
    var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`;
    var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);
    var signature = CryptoJS.enc.Base64.stringify(signatureSha);
    var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
    var authorization = btoa(authorizationOrigin);
    url = `${url}?authorization=${authorization}&date=${date}&host=${host}`;
    return url;
}

function toBase64(buffer: ArrayBuffer): string {
    var binary = "";
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

function connectWebSocket() {
    const websocketUrl = getWebSocketUrl();
    if ("WebSocket" in window) {
      iatWS = new WebSocket(websocketUrl);
    } else if ("MozWebSocket" in window) {
      iatWS = new MozWebSocket(websocketUrl);
    } else {
      alert("浏览器不支持WebSocket");
      return;
    }
    iatWS.onopen = (e) => {
      // 开始录音
      recorder.start({
        sampleRate: 16000,
        frameSize: 1280,
      });
      var params = {
        common: {
          app_id: APPID,
        },
        business: {
          language: "zh_cn",
          domain: "iat",
          accent: "mandarin",
          vad_eos: 60000,
          dwa: "wpgs",
        },
        data: {
          status: 0,
          format: "audio/L16;rate=16000",
          encoding: "raw",
        },
      };
      iatWS.send(JSON.stringify(params));
    };
    iatWS.onmessage = (e) => {
      console.log("开始识别：")
      renderResult(e.data);
    };
    iatWS.onerror = (e) => {
      console.error(e);
      recorder.stop();
    };
    iatWS.onclose = (e) => {
      recorder.stop();
    };
}
let resultTextTemp = "";
function renderResult(resultData: string) {
  // 识别结束
  let jsonData = JSON.parse(resultData);
  if (jsonData.data && jsonData.data.result) {
    let data = jsonData.data.result;
    let str = "";
    let ws = data.ws;
    for (let i = 0; i < ws.length; i++) {
      str = str + ws[i].cw[0].w;
    }
    console.log("str:",str)
    // 开启wpgs会有此字段(前提：在控制台开通动态修正功能)
    // 取值为 "apd"时表示该片结果是追加到前面的最终结果；取值为"rpl" 时表示替换前面的部分结果，替换范围为rg字段
    resultTextTemp = resultTextTemp+str;
  }
  if (jsonData.code === 0 && jsonData.data.status === 2) {
  }
  if (jsonData.code !== 0) {
    console.error(jsonData);
  }
}


// 创建实例 (默认使用内置播放 仅支持 xrtc/webrtc)  接入讯飞数字人
const avatarPlatform = new AvatarPlatform() 
  avatarPlatform
.setApiInfo({
  appId: '21e038e3',//到交互平台-接口服务中获取，appid需要发布后使用
  apiKey: '56c271b04ff61c4fb3fdfa46b3d572b5',//到交互平台-接口服务中获取 165750081436389376
  apiSecret: 'YWE0Mzc3MDg4N2RmYzBkODMyZjg4Mjcx',//到交互平台-接口服务中获取
  sceneId: '174770112782536704',// //到交互平台-接口服务中获取，传入"接口服务ID"
  serverUrl: 'wss://avatar.cn-huadong-1.xf-yun.com/v1/interact'
}).setGlobalParams({
  stream: {
    protocol: 'xrtc',//（必穿）实时视频协议，支持webrtc/xrtc，其中只有xrtc支持透明背景，需参数alpha传1
    alpha: 1,
    bitrate: 1000000,
    fps: 25,
  },
  avatar: {
    avatar_id: '110017006', //授权的形象资源id，到交互平台-接口服务-形象列表中获取已授权的形象
    width: 520,
    height: 500,
    mask_region: '[0, 0, 1080, 1020]',
    scale: 1,
    move_h: 0,
    move_v: 0,
    audio_format: 1,
  }, 
  tts: {
    vcn: 'x4_mingge', //授权的声音资源id，到交互平台-接口服务-声音列表中获取已授权的声音
    speed: 50,
    pitch: 50,
    volume: 100,
  },
  background: {
    type: 'url',
    data: '',
  },
})
const player = avatarPlatform.player || avatarPlatform.createPlayer()
  player
    ?.on(PlayerEvents.play, () => {
      console.log('sdk event: player play')
    })
    .on(PlayerEvents.waiting, () => {
      console.log('sdk event: player waiting')
    })
    .on(PlayerEvents.playing, () => {
      console.log('sdk event: player playing')
    })
    .on(PlayerEvents.playNotAllowed, () => {
      // TODO 由于浏览器限制，如果用户从未对页面进行过交互点击等操作，则无法正常自动播放音视频等
      // 这里需要交互层面引导用户点击屏幕，然后逻辑调用resume 恢复方法
      console.log('sdk event: play not allowed, muted play')

    })


const route = useRoute();
const router = useRouter();
const interviewId = Number(route.params.id);

// 状态变量
const exitDialogVisible = ref(false);
const startDialogVisible = ref(true); // 初始显示开始面试确认弹窗
const isAnswering = ref(false);
const interviewTime = ref(0);
const answerTime = ref(0);
const video = ref<HTMLVideoElement | null>(null);
let interviewTimer: number | null = null;
let answerTimer: number | null = null;
let isInterviewStarted = ref(false);
let count = 0;
let question = "";
// 面试信息
const interviewInfo = ref({
  id: interviewId,
  company: '腾讯科技',
  position: '前端开发工程师',
  date: '2024-01-15',
  time: '14:30-15:30'
});

// 格式化时间
const formatTime = (seconds: number) => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

// 确认开始面试
const confirmStartInterview = () => {
  startDialogVisible.value = false;
  isInterviewStarted.value = true;
  
  // 开始计时
  startInterviewTimer();
  
  // 启动摄像头
  startCamera();
  
  ElMessage({
    type: 'success',
    message: '面试已开始',
    duration: 1500
  });

  avatarPlatform
    .start({
      wrapper: document.querySelector(".wrapper1") as HTMLDivElement
    })
    .then(() => {
      console.log('connected &&  stream play successfully')
      // 注意这里仅是流可以播放， 如果是进页面在用户未交互网页时，代码自动连，
      // 第三步骤 player实例 可能收到PlayerEvents.playNotAllowed事件。
      // 您需要交互层面再次用户点击网页 并主动调用 player.resume() 恢复播放！！
      // 原因：受限于浏览器的自动播放策略
      //player.resume()

      // 发送文本, 第二个参数 DriverExtend  为可选, 默认是文本合成驱动. 
      // 可以通过配置nlp true 进行对文本理解, 具体参数参考对象说明DriverExtend
      avatarPlatform.writeText("你是科大讯飞的测试经理，现在要对一个没有任何工作经验的实习生进行一场一问一答模式的面试，从自我介绍开始，我希望你每次只提出1个问题，根据我的回答再继续提出一个问题，提出的问题尽量简练，不要有多余的话语，如果我回答的内容与问题不符合就换一个方向继续提问", {
        nlp: true//nlp语义理解，false为关闭，true为开启。等于true时需要开启交互平台-接口服务-大模型对话中的大模型。
      }).catch(e=> {
        // Error 
      })

      
    })
    .catch((e: any) => {
      // 连接或者流失败，会话停止。
      console.error(e.code, e.message, e.name, e.stack)
    })
};

// 可以选择性 按需 进行相关事件监听
avatarPlatform
      .on(SDKEvents.connected, (initResp: any) => {
        // 获取到拉流地址
        console.log('sdk event: connected', initResp)
      })
      .on(SDKEvents.stream_start, () => {
        // 引擎侧 首帧 推流开始 （注意：不代表端侧已经开始有画面！）
        console.log('sdk event: stream_start')
      })
      .on(SDKEvents.asr, (asrData: any) => {
        // 监听到语音的识别结果（asr）
        console.log('sdk event: asr', asrData)
      })
      .on(SDKEvents.nlp, (nlpData: any) => {
        // 监听到大模型语义理解结果（nlp）
        console.log('sdk event: nlp', nlpData)
        if(nlpData.status==2){
          question = nlpData.displayContent
        }
      })
      .on(SDKEvents.frame_start, (frameData: any) => {
        //监听到开始说话的推流首帧
        console.log('sdk event: frameBegin', frameData)
      })
      .on(SDKEvents.tts_duration, (sessionData: any) => {
        //监听到语音合成用时时长。
        console.log('sdk event: duration', sessionData)
        
      })
      .on(SDKEvents.frame_stop, (frameData: any) => {
        //监听到结束说话的末尾帧
        console.log('sdk event: frameEnd', frameData)
      })
      .on(SDKEvents.error, (error: any) => {
        //监听到错误信息
        console.log('sdk event: error', error)
      })
      .on(SDKEvents.action_start, (actionData: any) => {
        //监听到开始动作的推流首帧
        console.log('sdk event: actionBegin', actionData)
      })
      .on(SDKEvents.action_stop, (actionData: any) => {
        //监听到结束动作的末尾帧
        console.log('sdk event: actionEnd', actionData)
        
      })

// 取消面试
const cancelInterview = () => {
  router.push('/pending-interviews');
};

// 启动摄像头
const startCamera = async () => {
  try {
    if (video.value) {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      video.value.srcObject = stream;
      
      // 设置视频录制
      setupVideoRecording(stream);
    }
  } catch (err) {
    ElMessage.error('无法访问摄像头，请检查权限设置');
    console.error('访问摄像头错误:', err);
  }
};

// 设置视频录制
const setupVideoRecording = (stream: MediaStream) => {
  try {
    // 创建MediaRecorder实例
    mediaRecorder.value = new MediaRecorder(stream, { mimeType: 'video/webm' });
    
    // 设置数据可用时的处理函数
    mediaRecorder.value.ondataavailable = (event: BlobEvent) => {
      if (event.data && event.data.size > 0) {
        recordedChunks.value.push(event.data);
      }
    };
    
    // 录制停止时触发
    mediaRecorder.value.onstop = () => {
      isRecording.value = false;
    };
    
    // 开始录制
    mediaRecorder.value.start(1000); // 每秒获取一次数据
    isRecording.value = true;
    
    // 设置视频文件名 (使用时间戳)
    videoFileName.value = `interview_${interviewInfo.value.company}_${getCurrentFormattedTime()}`;
    
    console.log('视频录制已开始');
  } catch (err) {
    console.error('设置视频录制时出错:', err);
    ElMessage.error('无法录制视频');
  }
};

// 开始面试计时
const startInterviewTimer = () => {
  // 开始面试总计时
  interviewTimer = window.setInterval(() => {
    interviewTime.value += 1;
  }, 1000);
};

// 开始回答
const startAnswer = () => {
  if (isAnswering.value) return;
  
  isAnswering.value = true;
  answerTime.value = 0;
  
  // 开始计时
  answerTimer = window.setInterval(() => {
    answerTime.value += 1;
  }, 1000);
  
  ElMessage({
    type: 'success',
    message: '开始回答',
    duration: 1500
  });
  connectWebSocket();
};
let resultText = "";
// 结束回答
const endAnswer = () => {
  console.log(resultTextTemp)
  if (!isAnswering.value) return;
  
  isAnswering.value = false;
  
  // 停止计时
  if (answerTimer) {
    clearInterval(answerTimer);
    answerTimer = null;
  }
  
  ElMessage({
    type: 'info',
    message: `已结束回答，用时 ${formatTime(answerTime.value)}`,
    duration: 1500
  });
  setTimeout(() => {
    recorder.stop();
    iatWS.close();
    count++;
    if(count >=10){
      avatarPlatform.writeText(resultTextTemp+"。请针对我的回答对我本次面试进行评价并结束这次面试", {
        nlp: true//nlp语义理解，false为关闭，true为开启。等于true时需要开启交互平台-接口服务-大模型对话中的大模型。
      }).catch(e=> {
        // Error 
      })
      //confirmExit();
      return;
    }else{
      if(count == 1){
        resultText = "问题：" + question + "\n回答：" + resultTextTemp+"\n"
      }else{
        resultText += "问题：" + question + "\n回答：" + resultTextTemp+"\n"
      }
      avatarPlatform.writeText(resultTextTemp+"，请基于我的回答再提出一个问题", {
          nlp: true//nlp语义理解，false为关闭，true为开启。等于true时需要开启交互平台-接口服务-大模型对话中的大模型。
        }).catch(e=> {
          // Error 
        })
        resultTextTemp = "";
    }
  }, 2000);

};

// 退出面试确认
const exitInterview = () => {
  exitDialogVisible.value = true;
};

// 确认退出
const confirmExit = () => {
  // 停止所有计时器
  stopAllTimers();
  
  // 停止摄像头和录制
  stopCamera();
  
  // 保存录制的视频
  if (recordedChunks.value.length > 0) {
    saveRecordedVideo();
  }
  
  ElMessage({
    type: 'success',
    message: '面试已结束',
    duration: 1500
  });
  
  // 返回面试列表页
  router.push('/pending-interviews');
};

// 停止所有计时器
const stopAllTimers = () => {
  if (interviewTimer) {
    clearInterval(interviewTimer);
    interviewTimer = null;
  }
  
  if (answerTimer) {
    clearInterval(answerTimer);
    answerTimer = null;
  }
};

// 停止摄像头
const stopCamera = () => {
  if (video.value && video.value.srcObject) {
    // 停止摄像头
    const stream = video.value.srcObject as MediaStream;
    const tracks = stream.getTracks();
    tracks.forEach(track => track.stop());
    video.value.srcObject = null;
    
    // 停止录制
    if (mediaRecorder.value && isRecording.value) {
      mediaRecorder.value.stop();
    }
  }
};
const saveFile = (blob,filename) =>{
      // 创建下载链接
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    return {a,url}
}

const removeA = (a,url,blob)=>{
    // 清理
    setTimeout(() => {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
      if(blob.type=="video/webm")
        recordedChunks.value = [];
    }, 100);
}
// 保存录制的视频
const saveRecordedVideo = () => {
  if (recordedChunks.value.length === 0) {
    ElMessage.error('没有可用的录制内容');
    return;
  }
  
  // 创建Blob对象
  const blob = new Blob(recordedChunks.value, { type: 'video/webm' });
  const blobquest = new Blob(["\uFEFF" +resultText], { type: "text/plain;charset=utf-8" });
  const blobresult = new Blob(["\uFEFF" +question], { type: "text/plain;charset=utf-8" });
  
  try {
    // 创建下载链接
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = videoFileName.value;
    document.body.appendChild(a);
    a.click();
    const wes = saveFile(blob,videoFileName.value+".webm");
    const qst = saveFile(blobquest,videoFileName.value+"_qs.txt");
    const rst = saveFile(blobresult,videoFileName.value+"_rs.txt");
    
    const queryParams = reactive<Interview>({
      id: interviewId,
      evaluation_file_path: videoFileName.value+"_rs.txt",
      interview_process_file_path: videoFileName.value+"_qs.txt",
      video_path: videoFileName.value+".webm"
    })

    const saveResponse = saveInterviewInfo(queryParams);
    // 提示用户保存位置
    ElMessageBox.alert(
      `视频已准备好下载，请将视频保存到 D:/ftp 目录下。<br>文件名: ${videoFileName.value}`,
      '保存录制视频',
      {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        type: 'success',
      }
    );
    //resultText = "面试评价：" + question
    removeA(wes.a,wes.url,blob);
    removeA(qst.a,qst.url,blobquest);
    removeA(rst.a,rst.url,blobresult);
  } catch (err) {
    console.error('保存视频时出错:', err);
    ElMessage.error('无法保存视频');
  }
};

// 组件挂载时，不立即开始计时和摄像头，而是等待用户确认
onMounted(() => {
  // 模拟加载面试信息
  // 实际应用中应该从API获取
});

// 组件卸载前
onBeforeUnmount(() => {
  stopAllTimers();
  stopCamera();
  
  // 清理录制资源
  if (mediaRecorder.value && isRecording.value) {
    mediaRecorder.value.stop();
  }
  recordedChunks.value = [];
});
</script>

<style scoped>
.interview-room-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #222;
  height: 60px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.company-info h2 {
  margin: 0;
  font-size: 18px;
}

.company-info .position {
  font-size: 14px;
  color: #ccc;
  margin-top: 4px;
}

.interview-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.interview-timer .timer {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
}

.room-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.video-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #333;
}

.interviewer-section {
  background-color: #222;
  border-right: 1px solid #333;
}

.interviewee-section {
  background-color: #222;
  border-left: 1px solid #333;
}

.video-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.video-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #111;
  border-radius: 8px;
  overflow: hidden;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #222;
}

.video-placeholder .name {
  margin-top: 10px;
  font-size: 16px;
}

.room-footer {
  height: 80px;
  background-color: #222;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.control-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.control-buttons .icon {
  margin-right: 5px;
}

.start-dialog-content {
  margin: 10px 0;
  line-height: 1.8;
}

.start-dialog-content .tips {
  margin-top: 15px;
  color: #E6A23C;
  font-size: 14px;
}

strong {
  font-weight: bold;
  color: #409EFF;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .room-content {
    flex-direction: column;
  }
  
  .interviewer-section,
  .interviewee-section {
    border: none;
    height: 50%;
  }
  
  .interviewer-section {
    border-bottom: 1px solid #333;
  }
  
  .room-footer {
    flex-direction: column;
    height: auto;
    padding: 10px 20px;
    gap: 10px;
  }
}
</style> 